<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../assets/js/vue.js"></script>
    <title>指令</title>
</head>
<body>
    <h1>VUE 指令 数组和数组对象的循环 排序</h1>
    <hr>
    <div id="app">
            <h3>v-if</h3>
        <!-- v-if操作 -->
        <div v-if="isLogin">欢迎张**登录</div>
        <div v-else>请登录</div>
        <h3>v-show</h3>
        <!-- v-show -->
        <div v-show='isLogin'>欢迎张**登录</div>
        <div v-show='!isLogin'>请登录</div>


        <!-- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
             v-show：调整css dispaly属性，可以使客户端操作更加流畅。 -->

        <!-- v-for -->
        <h3>v-for</h3>
        <li v-for="item in sortItems">{{item}}</li>

        <!-- 二、排序 -->
        <!-- 我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。 -->
        <h3>三、对象循环输出</h3>
        <hr>
        <ul>
            <!-- 不带索引的循环输出 -->
            <li v-for="student in students">
                {{index+1}}:{{student.name}}=>{{student.age}}
            </li>
            <!-- 需要索引的循环输出 -->
            <li v-for="(sortStudents,index) in students">
                    {{index+1}}:{{student.name}}=>{{student.age}}
                </li>
        </ul>
    </div>
</body>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                isLogin:true,
                items:[1,2,,7,83,4,5,6],
                students:[
                    {"name":"sunkn", "age":"18"},
                    {"name":"sunkn", "age":"18"},
                    {"name":"djnin", "age":"12"},
                    {"name":"king", "age":"13"},
                ],
            },
           computed:{
               sortItems:function(){
                   return this.items.sort(sortNumber);
               },
               sortStudents:function(){
                   return sortByKey(this.students,"age")
               }
           }
        });
         // 数组自定义排序方式
        function sortNumber(a,b){
            // return b-a; 降序
             return a-b //升序
        }
       
        //数组对象方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
        
        }
       
    </script>
</html>